<template>  
  <div ref="mapContainer" class="map-container"></div>  
</template>  
  
<script setup>  
import { onMounted, ref } from 'vue';  
window._AMapSecurityConfig = {  
    securityJsCode: '你的安全密钥'  
  };  
const mapContainer = ref(null);  
let mapInstance = null; // 直接使用null作为初始值，因为我们会在后面覆盖它  
  
async function loadAMap() {  
  return new Promise((resolve, reject) => {  
    const script = document.createElement('script');  
    script.type = 'text/javascript';  
    script.src = `https://webapi.amap.com/maps?v=2.0&key=c0822144e8811ace2b58030ccaf1d653`;  
    script.onload = () => resolve();  
    script.onerror = (error) => reject(error);  
    document.head.appendChild(script);  
  });  
}  
onMounted(async () => {  
  await loadAMap();  
  if (mapContainer.value) {  
    mapInstance = new AMap.Map(mapContainer.value, {  
      zoom: 11,  
      center: [116.397428, 39.90923]  
    });  
  }  
});  
</script>  
  
<style scoped>  
.map-container {  
  width: 100%;  
  height: 100vh;  
}  
</style>